<template>
    <div class="texturesWarp" v-if="dataObj !== null">

        <div class="categoryItem categoryItemBottom texturesName">
            <span class="categoryItemTitle">名称</span>
            <span class="categoryItemContent">
                 <input @keydown="renameTextureInput"
                        type="text"
                        v-model="imageObj.name"
                        disabled="disabled"
                        autofocus="autofocus"
                 >&nbsp;
                <button class="icon iconfont icon-xiugai renameTextureBtn" @click="renameTexture"></button>
                <button class="icon iconfont icon-shanchu deleteTextureBtn" @click="deleteTexture(imageObj.name)"></button>
            </span>
        </div>

        <div class="categoryItem categoryItemBottom">
            <span class="categoryItemTitle">大小</span>
            <span class="categoryItemContent size">
                <span>{{size}}</span>
            </span>
        </div>

        <div class="categoryItem categoryItemBottom">
            <span class="categoryItemTitle">Wrap</span>
            <span class="categoryItemContent wrapping">
                <OptionPicker class="wrapS" :data="wrapTypeOption1" :materialData="imageObj" :className="className1" :target="target1"/>
                <OptionPicker class="wrapT" :data="wrapTypeOption2" :materialData="imageObj" :className="className2" :target="target2"/>
            </span>
        </div>

        <div class="categoryItem categoryItemBottom">
            <span class="categoryItemTitle">Mapping</span>
            <span class="categoryItemContent wrapping">
                <OptionPicker class="mappingSelector" :data="texturesMappingTypeOption" :materialData="imageObj" :className="mappingSelector" :target="targetMapping"/>
            </span>
        </div>

        <div class="categoryItem categoryItemBottom">
            <span class="categoryItemTitle">MagFilter</span>
            <span class="categoryItemContent wrapping">
                <OptionPicker class="magFilterSelector" :data="magFilterTypeOption" :materialData="imageObj" :className="magFilterSelector" :target="targetMagFilter"/>
            </span>
        </div>

        <div class="categoryItem categoryItemBottom">
            <span class="categoryItemTitle">MinFilter</span>
            <span class="categoryItemContent wrapping">
                <OptionPicker class="minFilterSelector" :data="minFilterTypeOption" :materialData="imageObj" :className="minFilterSelector" :target="targetMinFilter"/>
            </span>
        </div>

    </div>
</template>

<script>
    /* eslint-disable */
    import Vue from "vue"
    import $ from "jquery";
    import OptionPicker from "@/components/styleComponents/optionPickerCmp.vue";

    export default {
        name: "texturesCmp",

        data () {
            return {
                dataObj: this.$props.data,

                name: this.$props.singleKey,

                size: "",

                imageObj: null,

                wrapTypeOption1: [
                    {key: "Repeat", value: Halo.RepeatWrapping, selected: false},
                    {key: "ClampToEdge", value: Halo.ClampToEdgeWrapping, selected: false},
                    {key: "MirroredRepeat", value: Halo.MirroredRepeatWrapping, selected: false},
                ],

                wrapTypeOption2: [
                    {key: "Repeat", value: Halo.RepeatWrapping, selected: false},
                    {key: "ClampToEdge", value: Halo.ClampToEdgeWrapping, selected: false},
                    {key: "MirroredRepeat", value: Halo.MirroredRepeatWrapping, selected: false},
                ],

                texturesMappingTypeOption: [
                    {key: "UV", value: Halo.UVMapping, selected: false},
                    {key: "CubeReflection", value: Halo.CubeReflectionMapping, selected: false},
                    {key: "CubeRefraction", value: Halo.CubeRefractionMapping, selected: false},
                    {key: "EquirectangularReflection", value: Halo.EquirectangularReflectionMapping, selected: false},
                    {key: "EquirectangularRefraction", value: Halo.EquirectangularRefractionMapping, selected: false},
                    {key: "SphericalReflection", value: Halo.SphericalReflectionMapping, selected: false},
                    {key: "CubeUVReflection", value: Halo.CubeUVReflectionMapping, selected: false},
                    {key: "CubeUVRefraction", value: Halo.CubeUVRefractionMapping, selected: false},
                ],

                magFilterTypeOption: [
                    {key: "Nearest", value: Halo.NearestFilter, selected: false},
                    {key: "NearestMipMapNearest", value: Halo.NearestMipMapNearestFilter, selected: false},
                    {key: "NearestMipMapLinear", value: Halo.NearestMipMapLinearFilter, selected: false},
                    {key: "Linear", value: Halo.LinearFilter, selected: false},
                    {key: "LinearMipMapNearest", value: Halo.LinearMipMapNearestFilter, selected: false},
                    {key: "LinearMipMapLinear", value: Halo.LinearMipMapLinearFilter, selected: false},
                ],

                minFilterTypeOption: [
                    {key: "Nearest", value: Halo.NearestFilter, selected: false},
                    {key: "NearestMipMapNearest", value: Halo.NearestMipMapNearestFilter, selected: false},
                    {key: "NearestMipMapLinear", value: Halo.NearestMipMapLinearFilter, selected: false},
                    {key: "Linear", value: Halo.LinearFilter, selected: false},
                    {key: "LinearMipMapNearest", value: Halo.LinearMipMapNearestFilter, selected: false},
                    {key: "LinearMipMapLinear", value: Halo.LinearMipMapLinearFilter, selected: false},
                ],

                className1: ".wrapS",
                className2: ".wrapT",
                mappingSelector: ".mappingSelector",
                magFilterSelector: ".magFilterSelector",
                minFilterSelector: ".minFilterSelector",

                target1: "wrapS",
                target2: "wrapT",
                targetMapping: "mapping",
                targetMagFilter: "magFilter",
                targetMinFilter: "minFilter",

                imageName: "",

                textureEntity: null,

            };
        },

        components: {
            OptionPicker
        },
        props: ["data", "singleKey"],

        created () {

            this.size = this.getImageSize();

            this.setTypePickerValue();

            this.emitEventToPick();

            this.setOptionStyple();
        },

        watch: {
            singleKey: {
                handler (val) {

                    this.imageObj = null;

                    this.name = val;
                    this.dataObj = this.$props.data;

                    this.size = this.getImageSize();

                    this.setTypePickerValue();

                    this.emitEventToPick();
                }
            }
        },

        methods: {

            emitEventToPick () {

                this.$root.$emit("pickDataChanged", {
                    className: ".wrapS",
                    dataObj: this.imageObj,
                    option: this.wrapTypeOption1
                });

                this.$root.$emit("pickDataChanged", {
                    className: ".wrapT",
                    dataObj: this.imageObj,
                    option: this.wrapTypeOption2
                });

                this.$root.$emit("pickDataChanged", {
                    className: ".mappingSelector",
                    dataObj: this.imageObj,
                    option: this.texturesMappingTypeOption
                });

                this.$root.$emit("pickDataChanged", {
                    className: ".magFilterSelector",
                    dataObj: this.imageObj,
                    option: this.magFilterTypeOption
                });

                this.$root.$emit("pickDataChanged", {
                    className: ".minFilterSelector",
                    dataObj: this.imageObj,
                    option: this.minFilterTypeOption
                });

            },

            getImageSize () {

                this.imageObj = Halo.ResourceManager.getObj("img", this.name);

                this.imageName = this.imageObj.name;

                if (this.imageObj.image) {

                    const src = this.imageObj.image.src;

                    return Math.round( src.length / 1000) + "kb";

                } else {

                    return 0 + "kb";
                }
            },

            setOptionStyple () {

                this.$nextTick(() => {

                    const wrapTStr = ".texturesWarp .categoryItem .categoryItemContent.wrapping .wrapT";
                    const wrapSStr = ".texturesWarp .categoryItem .categoryItemContent.wrapping .wrapS";
                    const mappingSelector = ".texturesWarp .categoryItem .categoryItemContent.wrapping .mappingSelector";
                    const magFilterSelector = ".texturesWarp .categoryItem .categoryItemContent.wrapping .magFilterSelector";
                    const minFilterSelector = ".texturesWarp .categoryItem .categoryItemContent.wrapping .minFilterSelector";

                    const span1 = $(wrapTStr + ">span");
                    const span2 = $(wrapSStr + ">span");
                    const span3 = $(mappingSelector + ">span");
                    const span4 = $(magFilterSelector + ">span");
                    const span5 = $(magFilterSelector + ">span");

                    const wrapTWidth = $(wrapTStr).css("width");
                    const mappingSelectorWidth = $(mappingSelector).css("width");

                    const styleObj = {
                        "padding": 0,
                        "paddingLeft": "6px",
                        "height": "24px",
                        "lineHeight": "24px",
                        "boxSizing": "border-box",
                    };

                    span1.css("width", "60px");
                    span2.css("width", "60px");
                    span3.css("width", "160px");
                    span4.css("width", "160px");
                    span5.css("width", "160px");

                    $(wrapSStr + " .optionList").css("width", wrapTWidth);
                    $(wrapTStr + " .optionList").css("width", wrapTWidth);
                    $(mappingSelector + " .optionList").css("width", mappingSelectorWidth);
                    $(magFilterSelector + " .optionList").css("width", mappingSelectorWidth);
                    $(minFilterSelector + " .optionList").css("width", mappingSelectorWidth);

                    $(wrapSStr + " .optionList span").css(styleObj);
                    $(wrapTStr + " .optionList span").css(styleObj);
                    $(mappingSelector + " .optionList span").css(styleObj);
                    $(magFilterSelector + " .optionList span").css(styleObj);
                    $(minFilterSelector + " .optionList span").css(styleObj);
                });
            },

            setTypePickerValue () {

                this.setTargetSelectorView(this.wrapTypeOption1, "wrapS");
                this.setTargetSelectorView(this.wrapTypeOption2, "wrapT");
                this.setTargetSelectorView(this.texturesMappingTypeOption, "mapping");
                this.setTargetSelectorView(this.magFilterTypeOption, "magFilter");
                this.setTargetSelectorView(this.minFilterTypeOption, "minFilter");
            },

            setTargetSelectorView (option, attr) {

                let isFind = false;

                let k = "";
                let item = {};
                for (k in option) {

                    item = option[k];
                    item.selected = false;

                    if (this.imageObj[attr] === item.value) {
                        item.selected = true;
                        isFind = true;
                    }
                }

                if (!isFind) {
                    option[0]["selected"] = true;
                }
            },

            renameTextureInput (e) {

                if (e.keyCode === 13) {

                    $(e.target).attr("disabled", "disabled");

                    const name = $.trim($(e.target).val());

                    if (name && this.imageName) {

                        const obj = Vue.prototype.baseConfig.textures[this.imageName];

                        Editor.rename("img", this.imageName, name);

                        Vue.prototype.baseConfig.textures[name] = obj;

                        this.$root.$emit("outLineDataChanged");
                    }

                }
            },

            renameTexture (e) {
                $(e.target).siblings().removeAttr("disabled");
                $(e.target).siblings().focus();
            },

            deleteTexture (name) {

                Editor.remove("img", name);

                this.$root.$emit("outLineDataChanged");
                this.$root.$emit("editorDataChanged");
            },

        },
    }
</script>

<style scoped>
    .texturesWarp {
        width: 100%;
        color: rgba(182, 184, 220, 1);
        box-sizing: border-box;
        margin: 0 auto;
        position: relative;
    }

    .texturesWarp .categoryItem {
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
    }

    .texturesWarp .categoryItemTitle {
        font-size: 12px;
        font-weight: 100;
        padding-left: 15px;
        position: absolute;
    }

    .texturesWarp .categoryItemBottom {
        border-bottom: 1px solid rgba(31, 33, 49, 1);
        position: relative;
    }

    .texturesWarp .categoryItem .categoryItemContent i {
        position: absolute;
        right: 14px;
        color: rgba(61,63,86,1);
    }

    .texturesWarp .categoryItem .categoryItemContent input {
        position: absolute;
        text-align: right;
        background: transparent;
        border: none;
        font-size:14px;
        font-weight:100;
        color:rgba(182,184,220,1);
        right: 50px;
        top: 12px;
    }

    .texturesWarp .categoryItem .categoryItemContent span {
        position: absolute;
        right: 36px;
        width: 200px;
        overflow-x: hidden;
        text-align: right;
        font-size: 14px;
        font-weight:100;
        height: 40px;
    }

    .texturesWarp .categoryItem  .categoryItemContent.size {
        color: rgba(105, 108, 145, 1);
    }

    .texturesWarp .categoryItem  .categoryItemContent.wrapping {
        position: absolute;
        width: 303px;
        height: 40px;
        right: 0;
    }

    .texturesWarp .categoryItem .categoryItemContent.wrapping .wrapT,
    .texturesWarp .categoryItem .categoryItemContent.wrapping .mappingSelector,
    .texturesWarp .categoryItem .categoryItemContent.wrapping .magFilterSelector,
    .texturesWarp .categoryItem .categoryItemContent.wrapping .minFilterSelector {
        position: absolute;
        right: 14px;
        top: 8px;
        width: 94px;
    }

    .texturesWarp .categoryItem .categoryItemContent.wrapping .mappingSelector,
    .texturesWarp .categoryItem .categoryItemContent.wrapping .magFilterSelector,
    .texturesWarp .categoryItem .categoryItemContent.wrapping .minFilterSelector {
        width: 201px !important;
    }

    .texturesWarp .categoryItem .categoryItemContent.wrapping .wrapS {
        position: absolute;
        right: 122px;
        top: 8px;
        width: 94px;
    }

    .wrapT span {
        width: 60px;
    }



    .texturesWarp .categoryItem.categoryItemBottom.texturesName:hover i {
        cursor: pointer;
        color: rgba(105,108,145,1) !important;
    }

    .texturesWarp .texturesName.texturesNameActive i {
        color: rgba(105,108,145,1) !important;
    }

    .icon.iconfont.icon-shanchu.deleteTextureBtn {
        position: absolute;
        right: 14px;
        top: 14px;
        font-size:14px;
        font-weight:100;
        color:rgba(182,184,220,1);
    }

    .icon.iconfont.icon-xiugai.renameTextureBtn {
        position: absolute;
        right: 35px;
        top: 14px;
        font-size:14px;
        font-weight:100;
        color:rgba(182,184,220,1);
    }
</style>